<template>
  <p-dialog :visible="visible" @close="$emit('close')">
    <h2>扫描二维码加入QQ群</h2>
    <el-row>
      <el-col :span="8" class="col">
        <img class="img" src="~/static/img/group1.jpeg" alt="QQ群1">
        <div class="text">1群</div>
      </el-col>
      <el-col :span="8" class="col">
        <img class="img" src="~/static/img/group2.jpeg" alt="QQ群2">
        <div class="text">2群</div>
      </el-col>
      <el-col :span="8" class="col">
        <img class="img" src="~/static/img/group3.jpeg" alt="QQ群3">
        <div class="text">3群</div>
      </el-col>
    </el-row>
  </p-dialog>
</template>

<script>
export default {
  name: "ChatGroup",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.col{
  padding:20px;
}
.img{
  display:block;
  width:180px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}
.text{
  text-align:center;
  margin-top: 10px;
}
</style>
